<!DOCTYPE html>
<html>
    <head>
        <title>cppWebSockets chat server example</title>
        <meta name="author"    value="jason@jasonkruse.com" />
        <meta name="licsense"  value="BSD" />
        <meta name="robots"    value="none" />
        <style type="text/css">
            * { margin: 5px; }
            textarea {
                display: block;
                width:   80%;
                margin:  0;
                height:  200px;
            }
            
        </style>
    </head>
    <body>
        <h3>Basic chat server</h3>
        <div>
            <p>
                This is a super basic example of a chat server using lwebsockets++. This also
                shows how to use the key => value storage to associate data with a connection.    
            </p>
            <ul><br />
                <li>Compile and run the server in examples/chatServer.</li>
                <li>Open this page in multiple tabs.</li>
                <li>Start chatting with yourself</li>
            </ul>
            <p><br />
                <i>Note: </i>
                There is no flash fallback, so make sure you have a modern browser with
                WebSocket support.
            </p>
        </div>
        <fieldset>
            <legend>Demo</legend>
            <textarea id="output" readonly></textarea>
            <textarea id="input" placeholder="Enter a message"></textarea>
            <input type="button" name="inpuBtn" id="inputBtn" value="Send" />
            <div><u>Server responses</u></div>
        </fieldset>
        
        <script type="text/javascript">
            // Putting the js here after the dom is available in the browser because not using a framework
            var PORT = 8080;
            var ws = new WebSocket("ws://localhost:" + PORT );
            var input    = document.getElementById("input");
            var inputBtn = document.getElementById("inputBtn");
            var output   = document.getElementById("output");

            inputBtn.onclick = function( evt ){
                sendMessage();
            };

            input.onkeypress = function( evt ){
                var code = evt.keyCode ? evt.keyCode : evt.which;
                if( code == 13 ){
                    evt.preventDefault();
                    sendMessage();
                }
            };

            ws.onmessage = function( evt ){
                addMessage( evt.data );
            };

            ws.onerror = function( evt ) { 
                addMessage( 'WebSocket error :(' );
            };

            ws.onopen = function( evt ) { 
                // Unused
            };

            ws.onclose = function( evt ) { 
                addMessage( 'You disconnected' );
            };

            function sendMessage( ){
                ws.send(input.value);
                input.value = '';
            }

            function addMessage( msg ){
                output.value += msg + "\n"; 
                output.scrollTop = output.scrollHeight;
            }
        </script>
    </body>
</html>

